import './AppF.scss';
import Input from './components/classification/Input'
import Tabbar from './components/classification/Tabbar'
//react中存在两种形式的组件: 函数式组件, 类组件
//使用 rcc 快速创建 类组件  ( 主要使用这个 )
//使用 rsf 快速创建 函数式组件

import React, { Component } from 'react';

// 导入封装好的函数
import { category_list, category_subcate } from './utils/api'


class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentIndex: 0,
      arr: [
        {
          listname: [],
          listshop: []
        }
      ]
    }
  }

  // 挂载完成
  componentDidMount() {
    // 一级菜单请求
    category_list().then((res) => {
      console.log(res.data);
      this.state.arr[0].listname = res.data.list;
      this.setState({});
      // console.log(this.state.arr[0].listname);
    })
    category_subcate({ id: 225510 }).then((res) => {
      this.state.arr[0].listshop = res.data.subcate.subcategory
      this.setState({})
    })
  }



  // 定义方法，点击高亮和切换界面
  handleClick(index) {
    this.setState({
      currentIndex: index,
    }, () => {

      // console.log(this.state.arr[0].listname[this.state.currentIndex].id);
      // console.log(this.state.currentIndex);
      category_subcate({ id: this.state.arr[0].listname[this.state.currentIndex].id }).then((res) => {
        console.log(res.data);
        this.state.arr[0].listshop = res.data.subcate.subcategory
        this.setState({})
        console.log(this.state.arr[0].listshop);
      })
    })
  }

  render() { //渲染组件模板到视图
    return (
      <div className='app'>
        {/* 导入搜索组件 */}
        <Input></Input>
        {/* 商品列表 */}
        <div className="list">
          {/* 侧边导航栏 */}
          <div className="left">
            {
              this.state.arr[0].listname.map((item, index) => {
                return (
                  <div className={"btn " + (this.state.currentIndex == index ? 'activen' : '')} key={index} onClick={() => {
                    this.handleClick(index);
                  }}>
                    <span className={this.state.currentIndex == index ? 'active' : ''}>{item.name}</span>
                  </div>
                )
              })
            }
          </div>
          {/* 右边商品列表 */}
          <div className="right">
            {
              this.state.arr[0].listshop.map((item, index) => {
                return (
                  <>
                    <div className="title">{item.name}</div>
                    <div className='right_list' key={index}>
                      {
                        item.subNavs.map((a, b) => {
                          return (
                            <div className="shop_list" key={b}>
                              <img src={a.pic} alt="" />
                              <div className="name">{a.name}</div>
                            </div>
                          )
                        })
                      }
                    </div>
                  </>
                )

              })
            }
          </div>
        </div>
        {/* 底部导航栏 */}
        <Tabbar></Tabbar>
      </div>
    );
  }
}

export default App;